<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖</title>
</head>
<body>
    <button>发送</button>

    <script>
        let btn = document.querySelector('button')
        btn.addEventListener('click', debounce(fn,1000))
        function fn(e){
            console.log(e.target.innerHTML)
        }

        function debounce(fn,time) {
            let t = null    // 初始化定时器  
            return function(){
                let args = arguments
                // 如果定时器存在，就清除定时器，保证只执行最后一个定时器即可
                if(t){
                    clearTimeout(t)
                }
                t = setTimeout(() => {
                    t = null

                    // 改变this指向，因为fn函数在window作用域下，this指向的是window，并没有event事件对象，所以需要将fn函数的this指向btn，这样就可以获取到事件对象了。
                    fn.apply(this, args)  
                }, time);
            }
        }
    </script>
</body>
</html>